<!--
*@Author: zt
*@Description: 我的假期图表
*@Date: 2024-08-20
-->
<template>
  <u-card class="u-my-vocation-in-card">
    <div style="width: 100%; padding: 10px 0 0">
      <a-list
        :grid="{ column: vacationData.length }"
        :data-source="vacationData"
      >
        <template #renderItem="{ item }">
          <a-list-item style="padding: 0">
            <a-row justify="center">
              <a-progress
                type="circle"
                :percent="(item.value / item.total) * 100"
                :size="80"
                :strokeWidth="8"
              >
                <template #format="percent">
                  <a-row justify="center" align="bottom">
                    <span class="u-span-title f-font-family">
                      {{ item.value ?? 0 }}
                    </span>
                    <span class="u-span-value f-font-family f-padding-l2">
                      {{ item.label.indexOf('加班') !== -1 ? '时' : '天' }}
                    </span>
                  </a-row>
                </template>
              </a-progress>
            </a-row>
            <a-flex
              class="f-margin-t6"
              justify="center"
              style="font-size: 14"
              :style="{ color: item.color || '' }"
            >
              {{ item.label }}
            </a-flex>
          </a-list-item>
        </template>
      </a-list>
    </div>
  </u-card>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, onMounted } from 'vue';
import * as myCheckInApi from '@/service/personnel/myCheckIn/index';
import { useRoute, useRouter } from 'vue-router';
import * as echarts from 'echarts';
import { numberC } from '@/util/common';

interface DataProps {
  label: string;
  value: number;
  total: number;
  color?: string;
}

interface Props {
  data?: DataProps[];
  column?: number;
}
const props = withDefaults(defineProps<Props>(), {
  column: 6,
  data: [],
});

const vacationData = ref([]);

let days = reactive<any>({});
// // 获取我的考情数据
const getCheckInDateData = async () => {
  const res = await myCheckInApi.overTime();
  if (res.code == 0) {
    const data = res.data;
    // 加班
    days['overtimes'] = numberC(data['attenadnces']['overtimes']) ?? 0;
    days['overtimesMon'] = numberC(data['attenadnces']['overtimesMon']) ?? 0;
    // 请假
    days['leavedays'] = numberC(data['attenadnces']['leavedays']) ?? 0;
    days['leavedaysMon'] = numberC(data['attenadnces']['leavedaysMon']) ?? 0;
    // 离驻地
    days['leavecddays'] = numberC(data['attenadnces']['leavecddays']) ?? 0;
    days['leavecddaysMon'] =
      numberC(data['attenadnces']['leavecddaysMon']) ?? 0;

    //累计剩余休假总天数
    const allHoliday = numberC(days.overTime) + numberC(days.allAnnualDays);

    const annual = numberC(days.allAnnualDays) - numberC(days.annualdays);
    //累计剩余休假天数
    const holiday = numberC(days.syoffdays) + annual;
    vacationData.value = [
      { label: '本年请假天数', value: days.leavedays, total: 365 },
      { label: '本年加班时长', value: days.overtimes, total: 365 },
      { label: '本年离驻地天数', value: days.leavecddays, total: 365 },
      { label: '当月加班时长', value: days.overtimesMon, total: 30 },
      { label: '当月请假天数', value: days.leavedaysMon, total: 30 },
      { label: '当月离驻地天数', value: days.leavecddaysMon, total: 30 },
    ];
    // 展示几条数据
    vacationData.value = vacationData.value.slice(0, props.column);
  }
};

onMounted(async () => {
  await getCheckInDateData();
});
</script>

<style lang="scss">
.u-my-vocation-in-card {
  .u-span-title {
    font-family: DIN, DIN;
    font-weight: 500;
    font-size: 26px;
    color: #1890ff;
  }

  .u-span-value {
    font-family: DIN, DIN;
    font-weight: 500;
    font-size: 16px;
    color: #1890ff;
  }

  .ant-alert {
    border: 0;
    background: rgba(24, 144, 255, 0.1);
    border-radius: 8px 8px 8px 8px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #1890ff;
  }
}
</style>
